<template>
  <div class="safety-approve-nfo" :class="{ 'is-details': isSignature }">
    <div class="info-list">
      <template v-if="isSignature">
        <div class="contentList">
          <div class="contentLeft">
            <span class="contentLeftFont">作业证编号：</span>
          </div>
          <div class="contentRight border">
            {{ safeExamineDetail.code }}
          </div>
        </div>
        <div class="contentList">
          <div class="contentLeft">
            <span class="contentLeftFont">申请单位：</span>
          </div>
          <div class="contentRight border">
            {{ form.applyDepartmentName }}
          </div>
        </div>
        <div class="contentList">
          <div class="contentLeft">
            <span class="contentLeftFont">申请人：</span>
          </div>
          <div class="contentRight border">
            {{ form.applyPerson }}
          </div>
        </div>
      </template>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">监护人：</span>
        </div>
        <div class="contentRight border">
          <div
            class="select-user"
            @click="eventPersonSelect('leader', 'taskCharge')"
          >
            <span v-if="form.taskCharge">{{ form.taskCharge }}</span>
            <span v-else style="color: rgb(111, 111, 119);">请选择</span>
          </div>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">作业单位：</span>
        </div>
        <div class="contentRight border">
          <input
            type="text"
            v-model="form.taskDanwei"
            placeholder="请输入作业单位"
          />
        </div>
      </div>

      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">作业地点：</span>
        </div>
        <div class="contentRight border">
          <input
            :disabled="isSignature"
            type="text"
            v-model="form.taskPlace"
            placeholder="请输入作业地点"
          />
        </div>
      </div>

      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">作业开始时间</span>
        </div>
        <div class="contentRight border" @click="selectTime('startTime')">
          <span v-if="form.startTime">
            {{ form.startTime | formatDate("YYYY-MM-DD HH:mm") }}
          </span>
          <span v-else style="color:rgb(111, 111, 119);">
            选择作业开始时间
          </span>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">作业结束时间</span>
        </div>
        <div class="contentRight border" @click="selectTime('endTime')">
          <span v-if="form.endTime">
            {{ form.endTime | formatDate("YYYY-MM-DD HH:mm") }}
          </span>
          <span v-else style="color:rgb(111, 111, 119);">
            选择作业结束时间
          </span>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>

      <div class="contentList full">
        <div class="contentLeft">
          <span class="contentLeftFont">
            作业范围、内容、方式（包括深度、面积、并附件图）：
          </span>
        </div>
        <div class="contentRight">
          <textarea
            name="userQuestion"
            :disabled="isSignature"
            v-model="form.homewordSize"
            placeholder="请输入"
            class="userQuestion"
            maxlength="200"
          ></textarea>
          <div v-if="form.homewordSizeAnnex" class="annex">
            <img
              @click="eventShowImg(form.homewordSizeAnnex)"
              :src="form.homewordSizeAnnex"
            />
          </div>
          <upload
            v-if="!isSignature"
            :loading="loading"
            :max-count="2"
            :max-size="10 * 1024 * 1024"
            @oversize="oversize"
            @overcount="overcount"
            :file-stream="true"
            @delete="deleteList"
            @afterRead="afterRead($event, 'homewordSizeAnnex')"
          ></upload>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">确认人：</span>
        </div>
        <div class="contentRight border">
          <div
            class="select-user"
            @click="
              eventPersonSelect('leader', 'safetyMeasuresPerson', 2, 'person')
            "
          >
            <span v-if="form.safetyMeasuresPerson[2]">{{
              form.safetyMeasuresPerson[2].person
            }}</span>
            <span v-else style="color: rgb(111, 111, 119);">请选择</span>
          </div>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
    </div>

    <div class="info-list">
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">涉及的其它特殊作业：</span>
        </div>
        <div class="contentRight border">
          <input
            type="text"
            :disabled="isSignature"
            v-model="form.otherWork"
            placeholder="请输入涉及的其它特殊作业"
          />
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">安全教育人：</span>
        </div>
        <div class="contentRight border">
          <div
            class="select-user"
            @click="eventPersonSelect('leader', 'safetyPerson')"
          >
            <span v-if="form.safetyPerson">{{ form.safetyPerson }}</span>
            <span v-else style="color: rgb(111, 111, 119);">请选择</span>
          </div>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">危害辨识：</span>
        </div>
        <div class="contentRight border">
          <iu-selector
            class="selector"
            :placeholder="form.hazardIdentification.join(' , ')"
            popupTitle="危害辨识"
            multiple
            :disabled="isSignature"
            :initSelect="form.hazardIdentification"
            @selected="form.hazardIdentification = $event"
            :options="hazardOption"
          ></iu-selector>
        </div>
      </div>
    </div>
    <div class="info-list">
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">安全措施</span>
        </div>
      </div>
      <div class="contentList full">
        <div class="contentRight" v-if="!isSignature">
          <label data-list="checkboxList" class="checkbox-list">
            1. 作业人员作业前已进行了安全教育。
          </label>
          <div data-list="2" class="checkbox-list">
            <div>
              2. 作业地点处于易燃易爆场所，需要动火时已办理了动火证。
            </div>
          </div>
          <label data-list="3" class="checkbox-list">
            <div>
              3. 地下电力电缆已确认保护措施已落实。
            </div>
          </label>

          <label data-list="checkboxList" class="checkbox-list">
            <div>
              4. 地下通讯电（光）缆，局域网络电（光）缆已确认保护措施已落实。
            </div>
          </label>
          <label data-list="5" class="checkbox-list">
            <div>
              5. 地下供排水、消防管线、工艺管线已确认保护措施已落实。
            </div>
          </label>
          <label data-list="checkboxList" class="checkbox-list">
            <div>
              6.已按作业方案图规划线和立桩。
            </div>
          </label>
          <label data-list="7" class="checkbox-list">
            <div>
              7.
              动土地点有电线、管道等地下设施，已向作业单位交待并派人监护；作业时轻挖，未使用铁棒、铁镐或抓斗等机械工具。
            </div>
          </label>
          <label data-list="checkboxList" class="checkbox-list">
            <div>
              8. 作业现场围栏、警戒线、警告牌夜间警示灯已按要求设置。
            </div>
          </label>
          <label data-list="9" class="checkbox-list">
            <div>
              9. 已进行放坡处理和固壁支撑。
            </div>
          </label>
          <label data-list="10" class="checkbox-list">
            <div>
              10. 人员出入口和撤离安全措施已落实：A.梯子；B.修坡道。
            </div>
          </label>
          <div data-list="11" class="checkbox-list">
            <div>
              11. 道路施工作业已报：交通、消防、安全监督部门、应急中心。
            </div>
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            <div>
              12. 备有可燃气体检测仪、有毒介质检测仪。
            </div>
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            <div>
              13.
              现场夜间有充足照明：A.36V、24V、12V防水型灯；B.36V、24V、12V防爆型灯。
            </div>
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            <div>
              14. 作业人员已佩戴防护器具。
            </div>
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            <div>
              15. 动土范围内无障碍物，并已在总图上做标记。
            </div>
          </div>

          <label data-list="checkboxList" class="checkbox-list">
            <div>
              16. 其他安全措施：<input
                type="text"
                v-model="form.safetyMeasuresOther"
                :disabled="isSignature"
                class="input-text"
                style="width: 100%;text-align: left;"
              />
            </div>
          </label>
          <div class="checkbox-list">
            <div class="contentLeft">
              <span class="contentLeftFont">编制人：</span>
            </div>
            <div class="contentRight border">
              <div
                class="select-user"
                @click="
                  eventPersonSelect(
                    'leader',
                    'safetyMeasuresPerson',
                    1,
                    'person'
                  )
                "
              >
                <span v-if="form.safetyMeasuresPerson[1]">{{
                  form.safetyMeasuresPerson[1].person
                }}</span>
                <span v-else style="color: rgb(111, 111, 119);">请选择</span>
              </div>
              <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
            </div>
          </div>
          <div class="checkbox-list">
            <div class="contentLeft">
              <span class="contentLeftFont">确认人：</span>
            </div>
            <div class="contentRight border">
              <div
                class="select-user"
                @click="
                  eventPersonSelect(
                    'leader',
                    'safetyMeasuresPerson',
                    0,
                    'person'
                  )
                "
              >
                <span v-if="form.safetyMeasuresPerson[0]">
                  {{ form.safetyMeasuresPerson[0].person }}
                </span>
                <span v-else style="color: rgb(111, 111, 119);">请选择</span>
              </div>
              <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
            </div>
          </div>
        </div>
        <div class="contentRight" v-else>
          <div
            class="checkbox-list"
            v-for="(item, index) in form.safetyMeasuresContent || []"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>

    <template v-if="1">
      <div class="info-list">
        <div
          class="contentList full"
          v-for="(item, index) in acceptancePersonData"
          :key="'acceptance' + index"
        >
          <div class="contentLeft">
            <span class="contentLeftFont">{{ item.name }}</span>
          </div>
          <div class="contentRight border">
            <div
              class="select-user"
              @click="
                eventPersonSelect('leader', 'acceptancePerson', index, 'person')
              "
            >
              <span
                v-if="
                  form.acceptancePerson[index] &&
                    form.acceptancePerson[index].person
                "
              >
                {{ form.acceptancePerson[index].person }}
              </span>
              <span v-else style="color: rgb(111, 111, 119);">请选择</span>
            </div>
            <div class="select-user-right">
              <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
              <!-- <label>签字顺序：</label>
              <input
                v-model.number="form.acceptancePerson[index].sequence"
                maxlength="1"
                class="esign-sort"
                type="text"
              /> -->
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div
        class="info-list"
        v-for="(item, index) in acceptancePerson"
        :key="'acceptance' + index"
      >
        <div class="contentList full">
          <div class="contentLeft">
            <span class="contentLeftFont">
              {{
                acceptancePersonData[index] && acceptancePersonData[index].name
              }}
            </span>
          </div>
          <div class="contentRight">
            <div>
              {{ item.userName }}
            </div>
          </div>
        </div>
        <!-- <template v-if="item.checkState != null">
          <div class="contentList full">
            <div class="contentLeft">
              <span class="contentLeftFont">
                审批时间：
              </span>
            </div>
            <div class="contentRight">
              <div>
                {{ item.signatureTime | formatDate }}
              </div>
            </div>
          </div>
          <div class="contentList full">
            <div class="contentLeft">
              <span class="contentLeftFont">
                审批结果：
              </span>
            </div>
            <div class="contentRight">
              <div>
                {{ item.checkState ? "通过" : "不通过" }}
              </div>
            </div>
          </div>
          <div class="contentList full">
            <div class="contentLeft">
              <span class="contentLeftFont">
                审批描述：
              </span>
            </div>
            <div class="contentRight">
              <div>
                {{ item.content }}
              </div>
            </div>
          </div>
        </template> -->
      </div>
    </template>
    <div class="processWrap">
      <template v-if="!isSignature && (isEdit || !safeExamineDetail.id)">
        <div>
          <button @click="back">取消</button>
        </div>
        <div>
          <button @click="eventConfirm(1)">保存草稿</button>
        </div>
        <div>
          <button @click="eventConfirm(4)">提交</button>
        </div>
      </template>
      <template v-if="isSignature && isEsign">
        <div>
          <button @click="eventReject">驳回</button>
        </div>
        <div>
          <button @click="eventEsignConfirm">审批通过</button>
        </div>
      </template>
    </div>
    <div class="esign-fullscreen" v-if="esignShow">
      <div class="info-list">
        <div class="contentList full">
          <div class="contentLeft">
            <span class="notNull" v-if="confirmRejectTag">*</span>
            <span class="contentLeftFont">描述</span>
          </div>
          <div class="contentRight">
            <textarea
              name="userQuestion"
              v-model="esignContent"
              placeholder="请输入描述"
              class="userQuestion"
              maxlength="200"
            ></textarea>
          </div>
        </div>
      </div>
      <div class="info-list" v-if="!confirmRejectTag">
        <div class="contentList full">
          <div class="contentLeft">
            <span class="notNull">*</span>
            <span class="contentLeftFont">签字</span>
          </div>
          <div class="contentRight">
            <vue-esign ref="esign" :width="800" :height="600" bgColor="#fff" />
          </div>
        </div>
      </div>
      <div class="processWrap" v-if="buttonShow">
        <template>
          <div>
            <button @click="handleShowCancel">取消</button>
          </div>
          <div>
            <button @click="handleShowConfirm">保存</button>
          </div>
        </template>
      </div>
    </div>
    <confirm
      class="deviceDetailManage"
      v-model="confirmShow"
      title="提示"
      :close-on-confirm="false"
      @on-cancel="confirmShow = false"
      @on-confirm="handleTipsConfirm"
    >
      <p style="text-align:center;">
        确认要{{ confirmRejectTag ? "驳回" : "通过" }}该审批吗？
      </p>
    </confirm>

    <selectUser
      :show.sync="selectUserShow"
      type="select"
      :user-type="selectUserType"
      :initDepartmentId="form.applyDepartmentId || ''"
      @selected="handlePersonSelected"
    ></selectUser>
  </div>
</template>
<script>
import AssignmentsDataMixin from "./mixin";
export default {
  name: "donghuo",
  mixins: [AssignmentsDataMixin],
  data() {
    return {
      acceptancePersonData: [
        { name: "申请单位验收人：" },
        { name: "作业单位验收人：" },
        { name: "有关安全等部门验收人：" },
        { name: "审批部门验收人：" },
        { name: "完工验收人：" }
      ]
    };
  },
  mounted() {}
};
</script>
